<template>
    <div class="testBox">
        <el-input :placeholder="placeholder" :maxlength="maxlength" clearable="clearable" @focus="add = true" @blur="add = false"></el-input>
        <span class="bottom" :class="add? 'bottom1':''"></span>
        <span class="right" :class="add? 'right1':''"></span>
        <span class="top" :class="add? 'top1':''"></span>
        <span class="left" :class="add? 'left1':''"></span>
    </div>
</template>

<script>
  export default {
    name: "test",
    props:{
      placeholder:String,
      maxlength:String,
      clearable:Boolean,
    },
    data(){
      return{
        add:false,
      }
    },
    methods: {
      updateVal: function(val) {
        this.$emit('input', val);
      }
    }
  }
</script>
<style lang="scss">
    #testBox{
        .el-form-item__content{
            display: flex;
            align-items: center;
            overflow: hidden;
            padding-bottom:1px;
            border-bottom:1px solid #ccc!important;
        }
        .el-input__inner,el-input__inner,el-form-item.is-success{
            border:1px solid #eee;
            /*border-radius: 0!important;*/
            background: white!important;
        }
    }
</style>

<style scoped lang="scss">
    .testBox{
        position: relative;
        input {
            width: 6.5em;
            color: white;
            font-size: inherit;
            font-family: inherit;
            background-color: hsl(246, 41%, 18%);
            padding: 0.35em 0.45em;
            border: 1px solid transparent;
            transition: background-color 0.3s ease-in-out;
        }
        input:focus {
            outline: none;
        }
        input::placeholder {
            color: hsla(0, 0%, 100%, 0.6);
        }
        span {
            position: absolute;
            background-color: #409EFF;
            transition: transform 0.5s ease;
        }
        .bottom,
        .top {
            height: 1px;
            left: 0;
            right: 0;
            transform: scaleX(0);
        }
        .left,
        .right {
            width: 1px;
            top: 0;
            bottom: 0;
            transform: scaleY(0);
        }
        .bottom {
            bottom: 0;
            transform-origin: bottom right;
        }
        .bottom1 {
            transform-origin: bottom left;
            transform: scaleX(1);
        }
        .right {
            right: 0;
            transform-origin: top right;
        }
        .right1 {
            transform-origin: bottom right;
            transform: scaleY(1);
        }
        .top {
            top: 0;
            transform-origin: top left;
        }
        .top1 {
            transform-origin: top right;
            transform: scaleX(1);
        }
        .left {
            left: 0;
            transform-origin: bottom left;
        }
        .left1 {
            transform-origin: top left;
            transform: scaleY(1);
        }
    }

</style>